<template>
	<div class="register">
		<div class="title clearfix">
			<div class="logo fl">
				<Logo></Logo>
			</div>
			<div class="name fl">京西商城</div>
			<div class="name fl">欢迎注册</div>
		</div>
		<div class="register-info">
			<div class="register-content">
				<form action="/register">
					<!-- action="/register" -->
					<div class="register-text">
						<div class="title">
							<span class="iconfont icon-tishi"></span>
							我不会以任何理由要求你转账，谨防诈骗。
						</div>
						<div class="register-title">
							账户注册
						</div>
						<div class="register-name">
							<label for="name">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<input type="text" id="name" placeholder="请输入你的姓名" v-model="userInfo.name"/>
						</div>
						<div class="register-name">
							<label for="name">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<input type="text" id="name" placeholder="请输入你的邮箱" v-model="userInfo.email"/>
						</div>
						<div class="register-password">
							<label for="password">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<input type="password" id="password" placeholder="请输入密码" v-model="userInfo.password"/>
						</div>
						<div class="register-gender">
							<label for="gender">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<select name="gender" id="gender" v-model="userInfo.gender">
								<option value="" disabled>请选择您的性别</option>
								<option value="1">男</option>
								<option value="0">女</option>
							</select>
						</div>
						<div class="register-mobile">
							<label for="mobile">
								<span class="iconfont icon-wodejuhuasuan"></span>
							</label>
							<input type="text" id="mobile" placeholder="请输入你的电话号码" v-model="userInfo.mobile"/>
						</div>
						<button class="register-commit" @click.prevent="register">注册</button>
						<div class="login">
							<a href="/login">已有账号，立即登录></a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import Logo from "@/components/common/Logo.vue"
import { registerRequest } from "@/network/user.js"
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore()
const router = useRouter()

let userInfo=reactive({
	name:"",
	password:"",
	email:"",
	gender:"",
	mobile:"",
})

const register=()=>{
	console.log(userInfo)
	registerRequest(userInfo).then(res=>{
		if(res.status==4000){
			alert("注册成功")
			window.localStorage.setItem("token", res.data.token);
			window.localStorage.setItem("name", res.data.name);
			store.commit("setIsLogin", true);
			store.commit("setName", res.data.name);
			router.push("/")
			// console.log(res.status)
			// console.log(res.data)
		}else{
			alert("登陆失败")
		}
	}).catch(error=>{
		console.log(error.status)
		console.log(error.data)
	})
}
</script>

<style lang="less" scoped>
	.register{
		.title{
			width: 1000px;
			margin: auto;
			height: 80px;
			.register{
				height: 40px;
			}
			.name{
				font-size: 30px;
				margin-left: 10px;
				// vertical-align: middle;
				margin-top: 30px;
			}
		}
		.register-info{
			margin-top: 50px;
			background-color: #e93854;
			.register-content{
				width: 990px;
				height: 585px;
				margin: 0 auto;
				// background-image: url("C:\Users\HP\Pictures\Screenshots\屏幕截图 2024-04-23 211247.png");
				.register-text{
					margin-top: 20px;
					width: 350px;
					height: 500px;
					background-color: #fff;
					float: right;
					.title{
						background-color: #fff8f0;
						height: 40px;
						width: 350px;
						color: #999;
						line-height: 40px;
						text-align: center;
						span{
							width: 16px;
							height: 16px;
						}
					}
					.register-title{
						height: 40px;
						width: 350px;
						color: #999;
						line-height: 40px;
						text-align: center;
						color: #e93854;
						font-size: 18px;
						font-weight: 700px;
						border-bottom: 1px solid #f4f4f4;
					}
					.register-name,.register-password,.register-mobile,.register-name,.register-gender{
						border: 1px solid #bdbdbd;
						width: 310px;
						height: 30px;
						margin: 30px;
						line-height: 30px;
						label{
							display: inline-block;
							background-color: #f4f4f4;
							width: 30px;
							text-align: center;
							line-height: 30px;
							border-right: 1px solid #bdbdbd;
							span{
								height: 20px;
								width: 20px;
							}
							input{
								padding-left: 10px;
							}
						}
					}
					.forgrt-password{
						display: block;
						color: #666;
						text-align: right;
						margin-top: 20px;
						margin-left: 20px;
						&:hover{
							color: #e93835;
						}
					}
					.register-commit{
						width: 310px;
						height: 35px;
						background-color: #e93835;
						color: white;
						margin-top: 20px;
						font-size: 20px;
						margin-left: 20px;
					}
					.login{
						margin-top: 20px;
						background-color: #fcfcfc;
						height: 50px;
						width: 350px;
						line-height: 50px;
						text-align: right;
						color: #e93835;
						a{
							color: #e93854;
							margin-left: 20px;
							font-size: 18px;
							margin-right: 20px;
						}
					}
				}
			}
		}
	}
	
	#gender {
	    font-family: Arial, sans-serif;
	    font-size: 14px;
	    color: #888;
	  }
	
	  /* 为 option 元素添加样式 */
	  #gender option {
	    font-family: Arial, sans-serif;
	    font-size: 14px;
	    color: #888;
	  }
	
	  /* 为选中的 option 元素添加样式 */
	  #gender option:checked {
	    font-weight: bold;
	    color: #333; /* 选中的 option 的字体颜色 */
	  }
</style>